<template>
  <div class="logger-list" v-if="showLoggerVisibleDialog">
    <div class="logger-options">
      <el-date-picker class="logger-o-time"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      v-model="logger.loggerTime"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="日志开始日期"
                      end-placeholder="日志结束日期"
                      align="right">
      </el-date-picker>
      <el-select style="margin-right: 10px" v-model="logger.type" placeholder="请选择日志类型">
        <el-option v-for="(type,index) in loggerTypes" :key="index" :label="type" :value="type"></el-option>
      </el-select>
      <el-input class="logger-o-item logger-options-input" v-model="logger.content"
                placeholder="请输入日志内容检查"></el-input>
      <el-button class="logger-options-search" type="primary" @click="searchLoggerBtn">查询</el-button>
    </div>
    <div>
      <div style="height: 700px;overflow-x: auto;">
        <el-timeline :reverse="reverse">
          <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="_logTime(activity)">
            {{ activity.Details }}
            <div v-if="activity.OriJson!=null">【旧数据】：{{ activity.OriJson }}</div>
            <div v-if="activity.NewJson!=null">【新数据】：{{ activity.NewJson }}</div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="currentSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNumber">
      </el-pagination>
    </div>
  </div>
</template>
<script>
module.exports = {
  name: 'Logger',
  props: {
    show: { type: Boolean, default: false }
  },
  watch: {
    show (v) {
      this.showLoggerVisibleDialog = v;
      if (v) {
        this.getLoggerType();
        this.searchLogger();
      }
    }
  },
  data () {
    return {
      loggerTypes: [],
      showLoggerVisibleDialog: false,
      currentPage: 1,
      currentSize: 100,
      totalNumber: 0,
      logger: {
        type: null,
        loggerTime: null,
        content: null
      },
      reverse: false,
      activities: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: ''
    }
  },
  methods: {
    _logTime (activity) {
      let LogTime = dateFormatStr(activity.LogTime);
      if (!IsEmpty(activity.UserName)) {
        LogTime = `【操作人：${activity.UserName}】 : ` + LogTime
      }
      return LogTime;
    },
    getLoggerType () {
      GetLoggerTypeApi().then(r => {
        this.loggerTypes = r.Data;
      });
    },
    searchLoggerBtn () {
      this.currentPage = 1;
      this.searchLogger();
    },

    searchLogger () {
      let logger = this.logger;
      let time = logger.loggerTime;
      if (IsEmpty(time)) {
        time = [null, null];
      }
      SearchLoggerApi(time[0], time[1], logger.type, logger.content, this.currentPage, this.currentSize).then((v) => {
        console.log(v);
        if (v.Status) {
          this.totalNumber = v.TotalNumber;
          this.currentPage = v.Page;
          this.activities = v.Data;
        }
      });
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.currentSize = val;
      this.currentPage = 1;
      this.searchLogger();

    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.searchLogger();
    },
    handleClose (done) {
      this.showLoggerVisibleDialog = false;
      this.$emit('close');
      done();
    },
  }
}
</script>

<style scoped>
.logger-list {
  padding: 30px;
  user-select: text;

  .logger-options {
    display: flex;
    padding: 10px;

    .logger-o-time {
      width: 365px;
      margin-right: 10px
    }

    .logger-options-input {
      width: 300px;
      margin-right: 10px;
    }
  }
}
</style>
